<template>
  <!-- 头部导航 -->
  <view
    class="nav-bar"
    :style="{
      background: bg,
    }"
  >
    <view class="nav-icon">
      <image src="/static/imgs/nav-left.png" alt="" @click="back" />
      <view class="vav-title">
        {{ title }}
      </view>
      <view class=""> </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    bg: {
      type: String,
      default: "#ffffff",
    },
  },
  data() {
    return {};
  },
  methods: {
    back() {
      this.$Router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  padding: 38rpx 30rpx 18rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(10rpx);
  margin: auto;
  z-index: 999;

  .nav-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;

    image {
      cursor: pointer;
      width: 44rpx;
      height: 44rpx;
    }
    .uni-icons {
      cursor: pointer;
    }
    view {
      margin-left: 16rpx;
      text-align: center;
      font-weight: 600;
      font-size: 34rpx;
      color: #222222;
    }
    .vav-title {
      margin-right: 40rpx;
    }
  }
}
</style>
